<template>
  <div class="distributeSubscribe">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">分配预订详情</x-header>
    <div class="topHolder"></div>
    <card v-if="subscribeDetail.STATE == 0 || subscribeDetail.STATE == 2 || subscribeDetail.STATE == 3 || subscribeDetail.IS_DEPOSIT == 1">
      <div class="card-padding state" slot="content">
        <div class="filterArea" ref="filterArea" v-if="subscribeDetail.STATE == 0">
          <div class="filterItem">分配到：<x-button @click.native="showTablesByType = true" type="default" v-html="tablesByTypeText" class="inlineBtn popPickerBtn"></x-button></div>
        </div>
        <popup-picker @on-change="changeTablesByTypeText()" :show.sync="showTablesByType" :show-cell="false" :data="tablesByType" :columns="3" v-model="choosenTablesByType" ref="tablesByType" class="btn_popup-picker"></popup-picker>
        <div v-if="subscribeDetail.IS_DEPOSIT == 1" class="payedDeposit">
          <span v-text="'本次预订需要缴订金：'"></span>¥ <b v-text="formatCurrency(subscribeDetail.DEPOSIT)"></b> 元<br/>
          <span class="tips" v-if="subscribeDetail.STATE == 8">（未支付订金）</span>
          <span class="tips" v-else>（已支付订金）</span>
        </div>
        <div class="reason">
          <span class="tips" v-if="subscribeDetail.STATE == 2 && subscribeDetail.FAIL_REASON" v-text="'失败原因：' + subscribeDetail.FAIL_REASON"></span>
          <span class="tips" v-if="subscribeDetail.STATE == 3 && subscribeDetail.CANCEL_REASON" v-text="'取消原因：' + subscribeDetail.CANCEL_REASON"></span>
        </div>
      </div>
    </card>
    <group label-width="6em">
      <cell title="预订状态" :value="stateText"></cell>
      <cell title="订台类型" v-if="subscribeDetail.SUBSCRIBE_TYPE == 0">普通预订</cell>
      <cell title="订台类型" v-if="subscribeDetail.SUBSCRIBE_TYPE == 1">节日/派对预订</cell>
      <cell title="预约房台类型" :value="subscribeDetail.SUBSCRIBE_ROOM_PLATFORM_TYPE"></cell>
      <cell title="已分配房台" v-if="subscribeDetail.AREA && subscribeDetail.NUMBER && subscribeDetail.ROOM_PLATFORM_TYPE && subscribeDetail.AREA != '' && subscribeDetail.NUMBER != '' && subscribeDetail.ROOM_PLATFORM_TYPE != ''" :value="subscribeDetail.AREA + ' - ' + subscribeDetail.NUMBER +'（' + subscribeDetail.ROOM_PLATFORM_TYPE +'）'"></cell>
      <cell title="已分配房台" v-else :value="'未分配'"></cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 1">自助预订</cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 2">销售预订</cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 3">老板预订</cell>
      <cell title="预订方式" v-if="subscribeDetail.SUBSCRIBE_MODE == 4">股东预订</cell>
      <cell title="预订人" v-if="subscribeDetail.SUBSCRIBE_MODE == 2" :value="subscribeDetail.SUBSCRIBER + ' - ' + subscribeDetail.subscribe_DEPARTMENT"></cell>
      <cell title="预订人" v-if="subscribeDetail.SUBSCRIBE_MODE == 3" :value="'老板 - ' + subscribeDetail.SUBSCRIBER"></cell>
      <cell title="预订人" v-if="subscribeDetail.SUBSCRIBE_MODE == 4" :value="'股东 - ' + subscribeDetail.SUBSCRIBER"></cell>
      <cell title="到店客户名称" :value="subscribeDetail.CUSTOMER_NAME"></cell>
      <cell title="客户手机号" :value="subscribeDetail.PHONE"></cell>
      <cell title="消费人数" :value="subscribeDetail.CONSUMPTION_NUMBER"></cell>
      <cell title="预订时间" :value="subscribeDetail.SUBSCRIBE_DATETIME"></cell>
      <cell title="备注" :value="subscribeDetail.REMARK"></cell>
    </group>
    <box gap="1rem 0.8rem">
      <x-button v-if="subscribeDetail.STATE == 0" :gradients="['#1D62F0', '#19D5FD']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="确认分配"></x-button>
      <x-button v-else-if="subscribeDetail.STATE == 8" :disabled="false" text="未支付押金"></x-button>
      <x-button v-else :disabled="false" text="已处理"></x-button>
    </box>
  </div>
</template>

<script>
  import { Group, Cell, Box, Card, XButton, PopupPicker, numberComma } from 'vux'
  import {getSubscribeById,distributeSubscribe,getTablesByType} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'distributeSubscribe',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        paramSubscribeId:this.$route.params.subscribeId,
        loadingStatus:true,
        tablesByTypeText:'',
        showTablesByType:false,
        choosenTablesByType:['allRegion','allRegion_of_allRoomType','allRoom_in_allRegion_of_allRoomType'],
        subscribeDetail:{},
        stateText:''
      }
    },
    components:{
      Group,
      Cell,
      Box,
      Card,
      XButton,
      PopupPicker
    },
    computed:{
      tablesByType:{
        get(){
          return this.$store.getters.getTablesOfAll
        },
        set(value){
          this.$store.commit('updateTablesOfAll', value)
        }
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      getState(state){
        switch (state) {
          case 0:this.stateText = '预约待分配';break
          case 1:this.stateText = '分配成功';break
          case 2:this.stateText = '预约失败';break
          case 3:this.stateText = '取消预约';break
          case 4:this.stateText = '已到店';break
          case 5:this.stateText = '超时未到店';break
          case 6:this.stateText = '已开单';break
          case 7:this.stateText = '已点单';break
          case 8:this.stateText = '未支付押金';break
          case 9:this.stateText = '已结账';break
          default:this.stateText = '无';break
        }
      },
      submit(){
        for(let choosenItem of this.choosenTablesByType){
          if(choosenItem.indexOf('all') >= 0) {
            message({message:'请选择特定某张台的台号',type:'error'})
            return
          }
        }
        this.loadingStatus = true
        this.$vux.confirm.show({
          title:'是否确认分配预订',
          content:'请确认将该预订分配到所选台位？',
          onCancel: ()=> {
            this.loadingStatus = false
          },
          onConfirm: ()=> {
            let reqParams = {
              subscribeId:this.paramSubscribeId,
              choosenTableId:this.choosenTablesByType[2]
            }
            distributeSubscribe(reqParams).then((res)=>{
              if(res.status == 'success'){
                this.$router.go(0)
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('distributeSubscribe error info:', res.msg)
              }
              this.loadingStatus = false
            }).catch((err)=>{console.log('distributeSubscribe catch info:',err)})
          }
        })
      },
      changeTablesByTypeText(){
        this.tablesByTypeText = this.$refs.tablesByType&&this.$refs.tablesByType.getNameValues().replace(/ /g,' - ')+'<i class=\'iconfont icon-xiangxia2\'></i>'
      }
    },
    mounted(){
      return new Promise((resolve,reject)=>{
        if(this.tablesByType.length <= 0)
          getTablesByType('global').then((res)=>{
            if(res.status == 'success'){
              this.tablesByType = res.data
              //this.$store.commit('updateTablesOfAll', res.data)
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('getTablesByType error info:', res.msg)
            }
            resolve()
          }).catch((err)=>{console.log('getTablesByType catch info:',err)})
        else resolve()
      }).then(()=>{
        switch ('global') {
          case 'local':
            this.choosenTablesByType = [this.tablesByType[0].value,this.tablesByType[0].value + '_of_allroomType','allRoom_in_' + this.tablesByType[0].value + '_of_allroomType']
            break
          default:
            this.choosenTablesByType = ['allRegion','allRegion_of_allRoomType','allRoom_in_allRegion_of_allRoomType']
        }
        setTimeout(()=>{this.changeTablesByTypeText()},200)
        getSubscribeById(this.paramSubscribeId).then((res)=>{
          if(res.status == 'success'){
            this.subscribeDetail = res.data
            this.getState(this.subscribeDetail.STATE)
            console.log(this.subscribeDetail)
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getSubscribeById error info:', res.msg)
          }
          this.loadingStatus = false
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }).catch((err)=>{console.log('getSubscribeById catch info:',err)})
      })
    }
  }
</script>

<style lang="scss" scoped>
  .distributeSubscribe{
    .payedDeposit,.reason{
      margin-top: 0.5rem;text-align: center;
      .tips{color: #bd2c00;}
    }
  }
</style>
